<template>
  <div>
    <van-nav-bar
      title="标题"
      left-arrow
      @click-left="$router.push('/layout/home')"
    >
      <template #title>
        <van-search v-model="value" placeholder="请输入小区或地址">
          <template v-slot:left>
            <router-link to="/citylist"
              >{{ $store.state.cityId ? $store.state.cityId.label : "上海" }}
              <span>▼</span>
            </router-link>
          </template>
        </van-search>
      </template>
      <template #right>
        <van-icon
          name="guide-o"
          size="20px"
          color="#fff"
          @click="$router.push('/map')"
        />
      </template>
    </van-nav-bar>

    <van-dropdown-menu>
      <!-- 区域 -->
      <van-dropdown-item confirm-button-text="">
        <template>
          <van-picker
            @confirm="onConfirm"
            show-toolbar
            value-key="label"
            :columns="columns"
            confirm-button-text=""
            ref='areaaaa'
          >
            <!-- 下方内容 -->
            <template #confirm>
              <div class="sureBtn">
                <van-button class="sure" >确定</van-button>
              </div>
            </template>
            <template #cancel >
              <div class="sureBtn">
                <van-button class="cannel">取消</van-button>
              </div>
            </template>
          </van-picker>
        </template>
        <template #title> 区域 </template>
      </van-dropdown-item>

      <!-- 方式 -->
      <van-dropdown-item >
        <template>
          <van-picker  @confirm="onConfirmrentType" show-toolbar value-key="label" :columns="rentType">
            <!-- 下方内容 -->
            <template #confirm>
              <div class="sureBtn">
                <van-button class="sure"  >确定</van-button>
              </div>
            </template>
            <template #cancel >
              <div class="sureBtn">
                <van-button class="cannel">取消</van-button>
              </div>
            </template>
          </van-picker>
        </template>
        <template #title> 方式 </template>
      </van-dropdown-item>

      <!-- 租金 -->
      <van-dropdown-item >
        <template>
          <van-picker  @confirm="onConfirmprice" show-toolbar value-key="label" :columns="price">
            <!-- 下方内容 -->
            <template #confirm>
              <div class="sureBtn">
                <van-button class="sure" >确定</van-button>
              </div>
            </template>
            <template #cancel >
              <div class="sureBtn">
                <van-button  class="cannel" >取消</van-button>
              </div>
            </template>
          </van-picker>
        </template>
        <template #title> 租金 </template>
      </van-dropdown-item>

      <!-- 筛选 -->
      <!-- @open="isShow = true"  @close="isShow = false" -->
      <van-dropdown-item @open="isShow = true">
        <template #title> 筛选 </template>
      </van-dropdown-item>
    </van-dropdown-menu>
    <!-- 筛选-->
    <div v-if="isShow" class="choice">
      <van-cell title="户型" />
      <div class="ce">
        <van-button
          @click="moreroomType(item)"
          plain
          size="small"
          type="primary"
          v-for="item in roomType"
          :key="item.value"
          >{{ item.label }}</van-button
        >
      </div>
      <van-cell title="朝向" />
      <div class="ce">
        <van-button
          @click="moreroomType(item)"
          plain
          size="small"
          type="primary"
          v-for="item in oriented"
          :key="item.value"
          >{{ item.label }}</van-button
        >
      </div>
      <van-cell title="楼层" />
      <div class="ce">
        <van-button
          @click="moreroomType(item)"
          plain
          size="small"
          type="primary"
          v-for="item in floor"
          :key="item.value"
          >{{ item.label }}</van-button
        >
      </div>
      <van-cell title="房屋亮点" />
      <div class="ce">
        <van-button
          @click="moreroomType(item,index)"
          plain
          size="small"
          type="primary"
          v-for="(item ,index) in characteristic"
          :key="item.value"
          >{{ item.label }}</van-button
        >
      </div>
      <div class="btn">
        <van-button type="default" @click='oncancel'>清除</van-button>
        <van-button type="primary" @close="isShow = false" @click="moreResult">确认</van-button>
      </div>
    </div>

    <!-- 渲染 -->
    <div class="xuanran">
      <van-card
        v-for="item in mylist"
        :key="item.houseCode"
        :desc="item.desc"
        :title="item.title"
        currency=""
        :thumb="'http://liufusong.top:8080' + item.houseImg"
        @click="houseDetile(item.houseCode)"
      >
        <template #tags>
          <van-tag
            v-for="(item, index) in item.tags"
            :key="index"
            plain
            type="danger"
            >{{ item }}</van-tag
          >
        </template>
      </van-card>
    </div>
  </div>
</template>

<script>
// import Choice from './Choice.vue'
import { getHouseCondition, relevantHouse } from '@/api/house.js'
import { getHosueCode } from '@/api/user.js'
import { Toast } from 'vant'

export default {
  name: 'findHouse',
  // components: { Choice },
  data () {
    return {
      isShow: false,
      value: '',
      // columns2: [],
      columns: [], // 区域
      rentType: '', // 租房方式
      price: [], // 租金
      floor: [], // 楼层
      oriented: [], // 朝向
      roomType: [], // 户型
      characteristic: [], // 房屋亮点
      mylist: [], // 返回的数据渲染
      more: [], // 复合条件
      area: this.area, // 提交区域
      subway: this.subway, // 提交地铁
      subrentType: this.subrentType, // 提交租房方式
      subprice: this.subprice// 提交租金
    }
  },

  created () {
    // this.getMy()
    this.houseChose()
    this.moreResult()
  },

  methods: {
    async houseChose () {
      try {
        console.log(this.$store.state.cityId.value)
        const res = await getHouseCondition(this.$store.state.cityId.value)
        console.log(res)
        // q区域
        const obj = res.area
        this.dataEdit(obj)
        this.columns.push(obj)
        console.log(this.columns)

        // 地铁
        const obj1 = res.subway
        this.dataEdit(obj1)
        this.columns.push(obj1)

        // 方式
        this.rentType = res.rentType
        this.price = res.price
        this.floor = res.floor
        this.oriented = res.oriented
        this.roomType = res.roomType
        this.characteristic = res.characteristic
      } catch (err) {
        console.dir(err)
      }
    },
    onCancel () {
      console.log(11)
    },
    // 封装方法
    dataEdit (allobj) {
      allobj.children.forEach((item) => {
        const flag = 'children' in item
        if (!flag) {
          this.$set(item, 'children', [{ label: '不限' }])
        } else {
          item.children.forEach((i) => {
            const flag1 = 'children' in i
            if (!flag1) {
              this.$set(i, 'children', [{ label: '不限' }])
            }
          })
        }
      })
    },
    // 复合筛选
    moreroomType (item) {
      this.more.push(item.value)
      // console.log(this.more)
    },
    // 清除筛选
    oncancel () {
      this.more = []
      console.log(this.more)
      this.isShow = false
    },

    // 点击获取区域
    onConfirm (value, index) {
      console.log(index)
      const ind1 = index[0]
      const ind2 = index[1]
      const ind3 = index[2]
      // 区域
      if (ind1 === 0) {
        // 拿取 第二列
        if (ind2 !== 0 && ind3 === 0) {
          this.area = this.columns[ind1].children[ind2].value
          this.moreResult()
        }
        if (ind2 !== 0 && ind3 !== 0) {
          this.area = this.columns[ind1].children[ind2].children[ind3].value
          this.moreResult()
        }
      }
      console.log(this.area)
      // 地铁
      if (ind1 === 1) {
        // 拿取 第二列
        if (ind2 !== 0 && ind3 === 0) {
          this.subway = this.columns[ind1].children[ind2].value
          console.log(this.subway)
          this.moreResult()
        }
        // 第三列
        if (ind2 !== 0 && ind3 !== 0) {
          this.subway = this.columns[ind1].children[ind2].children[ind3].value
          console.log(this.subway)
          this.moreResult()
        }
      }
      // console.log(this.$refs.areaaaa.getColumnValue(1))
      // console.log(findIdByName(value[2], this.$refs.areaaaa.getColumnValue(2)))
      // // const firstValue = findIdByName(value[2], this.$refs.areaaaa.getColumnValue(2))
      // // const firstValue = findIdByName(value[1], this.$refs.areaaaa.getColumnValue(1))
      // function findIdByName (name, tree) {
      //   let id
      //   function find (obj) {
      //     if (obj != null) {
      //       if (obj.label === name) {
      //         id = obj.value
      //       }
      //       find(obj.left)
      //       find(obj.right)
      //     }
      //   }
      //   find(tree)
      //   return id
      // }
    },
    // 、点击方式
    onConfirmrentType (value) {
      this.subrentType = value.value
      this.moreResult()
    },
    // 点击租金
    onConfirmprice (value) {
      this.subprice = value.value
      this.moreResult()
    },

    // 提交查询的条件
    async moreResult () {
      Toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0 // 持续展示 toast
      })
      try {
        const res = await relevantHouse({
          cityId: this.$store.state.cityId.value,
          stat: 1,
          area: this.area, // 区域
          subway: this.subway, // 地铁
          roomType: this.subrentType, // 户型
          price: this.subprice, // 租金
          more: this.more.join(','),
          end: 20
        })
        console.log(res)
        this.isShow = false
        this.mylist = res.list
        Toast.success('加载成功')
      } catch (err) {
        Toast.fail('加载失败')
      }
    },

    // 点击跳转到详情
    async houseDetile (id) {
      await getHosueCode(id)
      this.$router.push('/detail/' + id)
    }

  }
}
</script>

<style scoped lang="less">
.van-nav-bar {
  background-color: #21b97a;
  /deep/.van-nav-bar__title {
    color: #fff;
    font-size: 18px;
  }
  /deep/.van-nav-bar__arrow {
    color: #fff;
  }
}

/deep/.van-nav-bar__title {
  max-width: 100%;
  .van-search {
    padding: 0;
    border-radius: 3px;
    overflow: hidden;
    a {
      font-size: 14px;
      color: #333;
      margin-left: 8px;
      span {
        font-size: 12px;
        color: #7f7f80;
      }
    }
    .van-icon-search {
      color: #7f7f80;
    }
  }
}
//
.van-picker {
  .sureBtn {
    display: inline-block;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 18px;
    display: flex;
  }
  /deep/.van-button {
    height: 50px;
    border: 0;
  }
  .cannel {
    flex: 1 1;
    border-radius: 0;
    color: #21b97a;
  }
  .sure {
    border-radius: 0;
    flex: 2 1;
    color: #fff;
    background-color: #21b97a;
  }
}
.xuanran {
  width: 100%;
  .houseItem {
    color: #fa5741;
    span {
      font-size: 16px;
      font-weight: bolder;
    }
    font-size: 12px;
  }
  .van-tag--medium {
    margin-top: 5px;
  }
  .van-card__title {
    font-size: 15px;
    color: #394043;
    font-weight: 700;
  }
  .van-card {
    background-color: transparent;
  }
  .van-card:not(:first-child) {
    border-bottom: 1px solid #e5e5e5;
  }
}
.choice {
  position: fixed;
  top: 0;
  left: 80px;
  right: 0;
  bottom: 0;
  overflow: auto;
  padding-bottom: 50px;
  z-index: 999;
  padding: 10px 15px 50px;
  background-color: #fff;

  .ce {
    padding-left: 50px;
    .van-button {
      height: 32px;
      width: 70px;
      margin: 0 18px 15px 0;
      border: 1px solid #ddd;
      border-radius: 3px;
      .van-button__text {
        color: rgb(104, 104, 104);
      }
    }
  }

  .btn {
    display: flex;
    position: fixed;
    left: 80px;
    right: 0;
    bottom: 0;
    z-index: 3;
    .van-button--default {
      flex: 1;
      height: 50px;
      line-height: 50px;
      text-align: center;
      font-size: 18px;
      border-radius: 0;
      color: #21b97a;
    }
    .van-button--primary {
      flex: 2;
      height: 50px;
      line-height: 50px;
      text-align: center;
      border-radius: 0;
      font-size: 18px;
      color: #fff;
    }
  }
}
</style>
